﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <title>查岗页面设置</title>
    <!-- jqGrid组件基础样式包-必要 -->
	    <link href="js/jsgrid/css/bootstrap.min.css?v=3.3.6" rel="stylesheet" />
        <link href="js/jsgrid/css/font-awesome.css?v=4.4.0" rel="stylesheet" />

        <!-- jqgrid-->
        <link href="js/jsgrid/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet" />
        <link href="js/jsgrid/css/animate.css" rel="stylesheet" />
<!--        <link href="js/jsgrid/css/style.css?v=4.1.0" rel="stylesheet" />-->
    <!-- 全局js -->
        <script src="js/jsgrid/js/bootstrap.min.js?v=3.3.6"></script>
        <!-- Peity -->
        <script src="js/jsgrid/js/plugins/peity/jquery.peity.min.js"></script>
        <!-- jqGrid -->
        <script src="js/jsgrid/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
        <script src="js/jsgrid/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
    <!--layer-->
    <script src="js/layer/layer.js"></script>
<link href="css/pages.css" rel="stylesheet" />
<link href="css/inspaceFrame.css" rel="stylesheet" />
<script src="js/login1.js"></script>
</head>
<body>
    <span class="contit">查岗页面</span>
    <div class="content">
        <div class="insbuttom">
            <button class="btnstyle btnsj" onclick="btnsj()"><span class="btnimages1"></span>随机查岗</button>
            <button class="btnstyle" onclick="listcheck()"><span class="btnimages2"></span>批量查岗</button>
            <button class="btnstyle" onclick="allcheck()"><span class="btnimages3"></span>全部查岗</button>
            <button class="btnstyle btnint" onclick="btnsettime()"><span class="btnimages4"></span>定时查岗</button>
            <button class="insactio">查 找</button>
            <input class="searchtext" placeholder="请输入查找内容" />
        </div>
        <div class="jqGrid_wrapper">
            <table id="list1"></table> 
		    <div id="pager1"></div>
        </div>
    </div>
    <!--layer弹窗层 random-->
	<div id="random" style="display: none;">
		<div class="box">
			<div class="title">查岗单位数：</div>
			<input id="randomvalue" value="30" />
		</div>
		<div class="btnbottom">
			<button class="buttonsub" onclick="random()">确 认</button>
		</div>
	</div>
	<!--layer弹窗 settime-->
	<div id="settime" style="display: none;">
		<div class="routine" >
			<div class="rtitop">
				<span class="settime_tit">日常</span>
				<button class="addtime settime_btn">新 增</button>
                <div class="settime_add">
                    <div class="settime_add_boxa">
                        <input value="15" /> 时
                        <input value="30" /> 分
                    </div>
                    <button class="settime_add_bl" value="" onclick="btnsetweek()">重复</button>
                    <input class="weektext" placeholder="请点击重复选项选择周期。" readonly />
<!--                    <textarea class="weektext" placeholder="星期" rows="2" readonly=""></textarea>-->
                    <button class="addtime_btna settime_btn" value="">保存</button>
                </div>
			</div>
            
            <div class="rtibody">
                <div class="rtibody_row">
                    <input type="text" name="rtibody_hour" class="rtibody_hour" placeholder="14" maxlength="2" readonly  />
                    <span >:</span>
                    <input type="text" name="rtibody_min" class="rtibody_min" placeholder="30" maxlength="2" readonly /> 
                    <input name="rtibody_week" class="rtibody_week" value="周三,周四" readonly  />
                    <div class="setswitch">
                         <input id="checkbox1" class="cbx hidden" type="checkbox" checked="checked"  />
                         <label for="checkbox1" class="lbl"></label><span></span>
                    </div>
                    <button class="del" onclick="">删除</button>
                    <button class="sub" onclick="">保存</button>
                    <button class="rev" onclick="">修改</button>
                 </div>
                <div class="rtibody_row">
                    <input type="text" name="rtibody_hour" class="rtibody_hour" placeholder="14" maxlength="2" readonly  />
                    <span >:</span>
                    <input type="text" name="rtibody_min" class="rtibody_min" placeholder="30" maxlength="2" readonly /> 
                    <input name="rtibody_week" class="rtibody_week" value="周三,周四" readonly  />
                    <div class="setswitch">
                         <input id="checkbox2" class="cbx hidden" type="checkbox"   />
                         <label for="checkbox2" class="lbl"></label><span></span>
                    </div>
                    <button class="del" onclick="">删除</button>
                    <button class="sub" onclick="">保存</button>
                    <button class="rev" onclick="">修改</button>
                </div>
            </div>


		</div>
		<div class="onlytime">
			<div class="olytop">
				<span class="settime_tit">不重复</span>
				<button class="settime_btn">保存</button>
			</div>
			<div class="setimeb">
                <input type="text" value="2017" maxlength="4" /> 年
                <input value="05" maxlength="2" /> 月
                <input value="10" maxlength="2" /> 日
                <input value="10" maxlength="2" /> 时
                <input value="30" maxlength="2" /> 分
			</div>
		</div>
		<button class="setok" onclick="closesettime()">确 认</button>
	</div>
    <!--时间设定重复选择layer捕获-->
    <div id="weekselect" style="display:none;">
        <label for="weekmon"><input type="checkbox" name="week" id="weekmon" value="周一" />　周一</label>
        <label for="weektue"><input type="checkbox" name="week" id="weektue" value="周二" />　周二</label>
        <label for="weekwed"><input type="checkbox" name="week" id="weekwed" value="周三"/>　周三</label>
        <label for="weekthu"><input type="checkbox" name="week" id="weekthu" value="周四"/>　周四</label>
        <label for="weekfri"><input type="checkbox" name="week" id="weekfri" value="周五"/>　周五</label>
        <label for="weeksat"><input type="checkbox" name="week" id="weeksat" value="周六"/>　周六</label>
        <label for="weeksun"><input type="checkbox" name="week" id="weeksun" value="周日"/>　周日</label>

    </div>
</body>
</html>
<script>
    //设置随机查岗次数弹窗
    function btnsj() {
        layer.open({
            type: 1,
            title: '选定随机次数',
            shadeClose: true,
            shade: false,
            //closeBtn: 0, //不显示关闭按钮
            maxmin: false, //开启最大化最小化按钮
            shade: [0.8, '#393D49'],
            shadeClose: true,//遮罩
            area: ['22rem', '9rem'],
            resize:false,
            content:  $('#random')//iframe的url，no代表不显示滚动条
        });
    }
    //设置定时查岗弹窗
    function btnsettime() {
        layer.open({
            type: 1,
            title: '定时发送',
            //closeBtn: 0, //不显示关闭按钮
            maxmin: false, //开启最大化最小化按钮
            shade: [0.8, '#393D49'],
            shadeClose: true,//遮罩
            area: ['32rem', '18rem'],
            resize: false,
            content:  $('#settime')//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    }
    //设置定时查岗重复周期弹窗
    function btnsetweek() {
        layer.open({
            type: 1,
            title: '',
            maxmin: false,
            area:['9rem','16rem'],
            resize: false,
            closeBtn: 0,
            shadeClose: false,
            btn:['确认','关闭'],
            content: $('#weekselect'),
            yes: function (index, layero) {
                layero = "";
                $("input[name=week]:checked").each(function () {
                    layero += $(this).val() + ",";
                });
                if ($('input[type=checkbox]:checked').length == 0) {
                    alert("提示:至少选择一个项！");
                } else {
                    $(".weektext").val(layero);
                };
                layer.close(index);
            }
        });
    }
    //修改—设置定时查岗重复周期弹窗
    function btnsetweek1() {
        layer.open({
            type: 1,
            title: '',
            maxmin: false,
            area: ['9rem', '16rem'],
            resize: false,
            closeBtn: 0,
            shadeClose: false,
            btn: ['确认', '关闭'],
            content: $('#weekselect'),
            yes: function (index, layero) {
                layero = "";
                $("input[name=week]:checked").each(function () {
                    layero += $(this).val() + ",";
                });
				if ($('input[type=checkbox]:checked').length == 0) {
					alert("提示:至少选择一个项！");
				} else {
					//$(".rtibody_week").eq(indexnum).val(layero);//这里的indexnum就是点选的行号，怎么把它传进来！
					$(".rtibody_week").val(layero);
				};
                layer.close(index);
            }
        });
    }
    //关闭定时弹窗
    function closesettime() {
        layer.closeAll();
    };



    $(function () {
        //定时设置弹窗新增点击效果
        $(".addtime").click(function () {
            $(".settime_add").toggle(500);
        });
        //新增-定时查岗规则
        $(".addtime_btna").on("click", function () {
            //alert("在rtibody下新增一条规则后，隐藏当前div");
            //alert($(".rtibody").find(".rtibody_row").size());
            var hour = $(this).prevAll("div").find("input").eq(0).val();
            var min = $(this).prevAll("div").find("input").eq(1).val();
            var week = $(this).prev("input").val();
            var labelnum = $(".rtibody").find(".rtibody_row").size();
            labelnum = labelnum + 1;
            if (week == "") {
                alert("至少选择一个重复周期！");
            } else {
                $(".rtibody").append('<div class="rtibody_row"><input type="text" name="rtibody_hour" class="rtibody_hour" value="' + hour + '" maxlength="2" readonly=""  /><span >:</span><input type="text" name="rtibody_min" class="rtibody_min" value="' + min + '" maxlength="2" readonly="" /> <input name="rtibody_week" class="rtibody_week" value="' + week + '" readonly=""  /><div class="setswitch"><input id="checkbox' + labelnum + '" class="cbx hidden" type="checkbox" checked="checked"  /><label for="checkbox' + labelnum + '" class="lbl"></label><span></span></div><button class="del" onclick="">删除</button><button class="sub" onclick="">保存</button><button class="rev" onclick="">修改</button></div>');
                $(this).parent().hide(500);
            }
        });
        //修改-定时查岗规则

        $(".rtibody").delegate(".rev", "click", function (event) {
            event.stopPropagation(); //阻止冒泡
            var indexnum = $(".rtibody").find(".rtibody_row").index($(this).parents(".rtibody_row"));
            alert("修改行号为"+(indexnum+1));
            //alert($(this).siblings(".setswitch").find("label").attr("for"));
            //当前规则可编辑：
            $(this).parents(".rtibody_row").find("input[name=rtibody_hour]").removeAttr("readonly").focus();
            $(this).parents(".rtibody_row").find("input[name=rtibody_min]").removeAttr("readonly");
            $(this).parents(".rtibody_row").find("input[name=rtibody_week]").css("color", "#333").attr("onclick", 'btnsetweek1()');
            //其他规则不可编辑：
            $(this).parents(".rtibody_row").siblings().find("input[name=rtibody_hour]").attr("readonly", "readonly");
            $(this).parents(".rtibody_row").siblings().find("input[name=rtibody_min]").attr("readonly", "readonly");
            $(this).parents(".rtibody_row").siblings().find("input[name=rtibody_week]").removeAttr("onclick").css("color", "#747474");
        });
        //删除-定时查岗规则
        $(".rtibody").delegate(".del", "click", function () {
            $(this).parents(".rtibody_row").remove();
        });

        //查岗按钮弹窗顶部icon变换
        $(".btnsj").click(function () {
            $(".layui-layer-title").css("background-image", "url(images/inspect/btn_suiji3.png)");
        });

        $(".btnint").click(function () {
            $(".layui-layer-title").css("background-image", "url(images/inspect/btn_dingshi3.png)");
        });

        //jsgrid表格插件
        $.jgrid.defaults.styleUI = 'Bootstrap';
        // Examle data for jqGrid
        var mydata = {};
        
        $.ajax({
        	async:false, //同步骤执行，即从后台获取json数据以后才本地装载jqgrid数据
    		cache:false,
    		type:'POST',
    		dataType:"json",
    		url:"PeopleAction_check.action",
    		error:function() {
    			alert("查询失败。123123");
    		},
    		success:function(data) {
    		    mydata = data;
    		}
        });

        // Configuration for jqGrid Example 1
        $("#list1").jqGrid({
            data: mydata,
            datatype: "local",
            height: "90%",
            autowidth: true,
            shrinkToFit: true,
            rowNum: 10,
            rowList: [10, 20, 30],
            colNames: ['单位ID','单位名称', '负责人', '联系方式'],
            colModel: [
                {
                	name:'ID',
                	index:'ID',
                	hidden:true,
                	key:true,
                },
                {
                    name: 'addr',
                    index: 'addr',
                    width: 40, 
                },
                {
                    name: 'people',
                    index: 'people',
                    width:30
                },
                {
                    name: 'phone',
                    index: 'phone',
                    width: 30
                }
            ],
            pager: "#pager1",
            viewrecords: false,
            caption: "",
            hidegrid: false,
            multiselect: true,
        });


        //$("#list1").jqGrid('navGrid', '#pager1', {
        //    edit: true,
        //    add: true,
        //    del: true,
        //    search: true
        //}, {
        //    height: 200,
        //    reloadAfterSubmit: true
        //});


        //$(window).resize(function () {

        //    $("#analyDataTab").setGridWidth($(window).width() * 0.99); $("#charDataTab").setGridWidth(document.body.clientWidth * 0.99);

        //});
        $(window).resize(function () {
            $("#list1").setGridWidth($(window).width()*.98);
        });
    });
    //全部查岗
    function allcheck(){
    	 $.ajax({
             type: "POST",
             url: 'PeopleAction_allcheck.action',
             async: false,
             success: function (data) {
                 msg = eval("(" + data + ")");
                 if (msg.msg==1) {
                     alert("开始查岗，请等待回复。。。");
                 }
                 else {
                 	alert("查岗失败！");
                 }
             },
             error: function (err) {
                 alert("出现异常！！");
             }
         })
    };
    //随机查岗
    function random() {
    	var randomvalue = $("#randomvalue").val();
    	
    	$.ajax({
            type: "POST",
            url: 'PeopleAction_random.action',
            data:{
		    	randomvalue:$("#randomvalue").val()
		    }, 
            dataType:"json",
            async: false,
            success: function (data) {
                console.log(data);
                msg = eval("(" + data + ")");
                if (msg.msg==1) {
                    alert("开始查岗，请等待回复。。。");
                    window.location.reload();
                }
                else if(msg.msg==2){
                	alert("对不起，没有那么多消控点，请重新输入！");
                }
                else {
                	alert("查岗失败！！");
                }
            },
            error: function (err) {
                alert("出现异常！！");
                msg = eval("(" + err + ")");
            }
        })
    };
    //批量查岗
    function listcheck(){
    	var ids = $('#list1').jqGrid('getGridParam', 'selarrrow');   //获取jqgrid选中行的rowID（行号）。
    //	alert(ids[2]);
    	if(ids.length == 0) {
    		alert("未选中，请选择查岗单位！");
    		return;
    	} else {
    		$.ajax({
                type: "POST",
                url: 'PeopleAction_listcheck.action',
                data: {
                	length :ids.length,
                	"steps": ids 
                },
                dataTybe: "json",
                async: true,
                traditional: true,
                success: function (data) {
                	msg = eval("(" + data + ")");
                	 if (msg.msg==1) {
                         alert("开始查岗，请等待回复。。。");
                         window.location.reload();
                     }
                },
                error: function () {
                    alert("该查询功能还未实现！我们会尽快完成");
                }
            });
    	}
    	
    }
    
</script>